﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>护理知识在线学习 WSS</title>
    <link href="@Href("~/Content/bootstrap-3.1.1-dist/css/bootstrap.min.css")" rel="stylesheet" />
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }

        .topmenu
        {
            position: fixed;
            left: 0;
            top: 0;
            width: 210px;
            background-color: black;
            z-index: 1;
        }

            .topmenu .head
            {
                position: relative;
                left: 0;
                top: 20px;
                text-align: center;
                color: white;
            }

            .topmenu .bottom
            {
                position: absolute;
                left: 0;
                bottom: 0;
                height: 40px;
                font: normal normal 12px/40px 宋体;
                text-align: center;
                color: white;
                width: 100%;
            }

            .topmenu .item
            {
                position: relative;
                top: 90px;
                left: 0;
                text-align: center;
                border-bottom: 1px;
                border-color: darkblue;
                height: 60px;
                font: normal bold 16px/60px Microsoft Yahei;
                width: 100%;
                color: white;
            }

            .topmenu .hover, .topmenu .active
            {
                background-color: #99CCFF;
            }

            .topmenu .active
            {
                color: black;
            }

            .topmenu .item span, .topmenu .item label
            {
                cursor: pointer;
            }

            .topmenu .item label
            {
                margin-left: 15px;
            }

        .toptab
        {
            position: fixed;
            left: 210px;
            top: 0;
            height: 42px;
            width: 100%;
            background-color: black;
            z-index: -1;
        }

        .top_icon
        {
            position: fixed;
            top: 10px;
            right: 10px;
            font: normal normal 14px/14px Microsoft Yahei;
        }
    </style>
</head>
<body>
    <div style="width: 100%">
        <div class="topmenu" id="topmenu">
            <div class="head">
                <img id="headimg"  height="60" style="cursor: pointer;" width="60" src="@Url.Content("~/Content/images/head/" + ViewBag.USERPIC)" alt="@(ViewBag.UserName)" class="img-circle">
                <h6>欢迎您，@(ViewBag.UserName)
                </h6>
            </div>
            <div class="item active">
                <span class="glyphicon glyphicon-home"></span>
                <label key="home" url="/adm/home">首　　页</label>
            </div>
            <div class="item">
                <span class="glyphicon glyphicon-user"></span>
                <label key="2" url="/adm/usercenter">用户中心</label>
            </div>
            <div class="item">
                <span class="glyphicon glyphicon-book"></span>
                <label key="3" url="/adm/rescenter">资源中心</label>
            </div>
            <div class="item">
                <span class="glyphicon glyphicon-list-alt"></span>
                <label key="4" url="/adm/testcenter">题库中心</label>
            </div> 
            <div class="item">
                <span class="glyphicon glyphicon-cog"></span>
                <label key="5" url="/xt/index">系统配置</label>
            </div>
            <div class="item">
                <span class="glyphicon glyphicon-music"></span>
                <label key="6" url="/adm/test">测试地带</label>
            </div>
            <div class="bottom">
                <span style="cursor: pointer" data-original-title="收缩">《 </span>
            </div>
        </div>


        <ul class="nav nav-tabs toptab" id="toptab">
            <li class="active"><a href="#home" data-toggle="tab">首页
            </a>
            </li>
        </ul>

        <div class="tab-content" id="toptab_content">
            <div class="tab-pane active" id="home">
                <iframe frameborder="0"  style="position: fixed; left: 210px; top: 42px; border: 0" @*id="mainframe"*@ src="/adm/home"></iframe>
            </div>
        </div>
        <div class="top_icon">
            <a href="javascript:void(0)" onclick="personalsetting()" style="margin-right: 10px; color: white;">
                <span class="glyphicon glyphicon-cog"></span>
                设置
            </a>
            <a href="#" style="margin-right: 10px; color: white;">
                <span class="glyphicon glyphicon-bell"></span>
                消息
            </a>
            <a href="/account/logout" style="margin-right: 10px; color: white;">
                <span class="glyphicon glyphicon-off"></span>
                登出
            </a>
        </div>
    </div>

    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.11.0.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/bootstrap-3.1.1-dist/js/bootstrap.min.js")"></script>
    <script type="text/javascript">

        var topwin = {
            userid: '@ViewBag.UserId',
            username: '@ViewBag.UserName'
        }
        var toptab = {
            addTab: function (title, id, src) {
                if (toptab.exsistTab(id)) {
                    $("#toptab a[href='#" + id + "']").tab('show');
                    return;
                }
                $("#toptab").append('<li><a href="#' + id + '" data-toggle="tab">' + title + '<i class="close" onclick="toptab.removeTab(\'' + id + '\')"> &times;</i></a></li>');
                var $frame = $("#home").find("iframe").clone();
                $frame.attr("src", src);
                $("#toptab_content").append('<div class="tab-pane active" id="' + id + '">' + $frame.get(0).outerHTML + '</div>');
                $('#toptab a:last').tab('show');
            },
            exsistTab: function (id) {
                var ret = false;
                $("#toptab a").each(function (idx, obj) {
                    ret = $(this).attr("href") == ("#" + id);
                    if (ret) {
                        return false;//break
                    }
                });
                return ret;
            },
            removeTab: function (id) {
                //获取当前li的前一个li
                var prevLi = $("#toptab a[href='#" + id + "']").parent("li").prev();
                var prevLi_aHref = prevLi.find("a").attr("href");

                $("#toptab a[href='#" + id + "']").parent("li").remove();
                $("#toptab_content div[id='" + id + "']").remove();

                prevLi.addClass("active").siblings(".active").removeClass("active");
                $("#toptab_content div[id='" + prevLi_aHref.substring(1) + "']").addClass("active").siblings(".active").removeClass("active");
            }
        };

        function personalsetting() {
            toptab.addTab("个人设置", "peson12alse12tting", "/adm/personalsetting");
        }

        $(function () {

            $("#toptab li").bind("dblclick", function () {
                return $(this).children("a").attr("href");
            });
            function topmenu() {

                this.is_expand = true;
                this.$topmenu = $("#topmenu");

                var winheight = $(window).height(), winwidth = $(window).width();

                this.winwidth = winwidth;
                this.$topmenu.height(winheight);

                $("iframe").css("left", 210).height(winheight-42);
                $("iframe").width(winwidth - 210);

                this.bind_event();
            }

            topmenu.prototype.on_item_click = function ($item) {

                var url = $item.children("label").attr("url");
                if (url) {
                    toptab.addTab($item.children("label").text(), $item.children("label").attr("key"), url);
                }

            };

            topmenu.prototype.bind_event = function () {
                var self = this;

                self.$topmenu.children(".item").mouseover(function () {

                    $(this).addClass("hover");
                }).mouseout(function () {

                    $(this).removeClass("hover");
                }).click(function () {

                    $(this).addClass("active").siblings(".active").removeClass("active");
                    self.on_item_click($(this));
                });

                self.$topmenu.children(".bottom").children("span:first").click(function () {

                    var wid = self.is_expand ? 100 : 210;
                    $("iframe").animate({ left: wid });
                    $("#toptab").animate({ left: wid });
                    $("iframe").width(self.winwidth - wid);

                    self.$topmenu.animate({ width: wid + "px" });

                    self.$topmenu.children(".item").slideToggle(500, function () { });

                    this.innerText = self.is_expand ? "》" : "《";
                    $(this).attr("data-original-title", self.is_expand ? "展开" : "收缩").tooltip('hide');
                    self.is_expand = !self.is_expand;

                }).tooltip({
                    animation: true,
                    trigger: 'hover'
                });
            };

            var mn = new topmenu();


            $("#headimg").tooltip({
                animation: true,
                trigger: 'hover',
                placement: 'right',
                title: '@ViewBag.USERPIC' == "default.jpg" ? "求真像" : topwin.username
            });
        });


    </script>
</body>
</html>
